<template>
  <div class="insert-shop-product">
    <div class="title">添加产品测试表</div>
    <el-form :model="formContent" label-width="120px" class="form-con">
      <m-address @receiveDistrictId="initDistrictId"></m-address>
      <template>
        <el-form-item label="产品型号：">
          <el-select v-model="formContent.productModelId" placeholder="请选择">
            <el-option v-for="(item, i) in formContent.productModelOption" :label="item.modelName"
                       :value="item.productModelId"
                       :key="item.productModelId"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="产品类型：">
        <el-radio class="radio" v-model="formContent.productType" label="1">单车</el-radio>
        <el-radio class="radio" v-model="formContent.productType" label="2">充电宝</el-radio>
        <el-radio class="radio" v-model="formContent.productType" label="3">雨伞</el-radio>
        <el-radio class="radio" v-model="formContent.productType" label="4">娃娃机</el-radio>
      </el-form-item>
      <el-form-item label="赠送积分：">
        <el-input-number class="el-count" v-model="formContent.inregral" :step="2"></el-input-number>
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="formContent.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <set-param></set-param>
      <el-form-item label="图片上传：">
        <el-upload class="upload-demo" action="/"
                   :file-list="formContent.picture">
          <el-button size="normal" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="选择日期：">
        <el-date-picker v-model="formContent.inputTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="说明：">
        <el-input v-model="formContent.info" :autosize="{ minRows: 2, maxRows: 4}" type="textarea"
                  placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click="addProductTest">添 加</el-button>
        <el-button type='primary' @click="reset">重 置</el-button>
        <div class="err-panel">
          <span class="err-text" v-show="isShowErr">&nbsp;&nbsp;&nbsp;* {{errMsg}}</span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from 'jquery'
  import SetParam from 'components/setParam/setParam'
  import MAddress from 'components/mAddress/mAddress'
  import validate from 'common/js/validate'

  export default {
    data () {
      return {
        isShowErr: false,
        errMsg: '',
        formContent: {
          districtId: '',
          productType: '',
          inregral: '',
          productModelId: 1,
          productModelOption: [],
          name: '',
          info: '',
          inputTime: '',
          picture: []
        }
      }
    },
    created () {
      setTimeout(() => {
        this.getProductModel()
      }, 20)
    },
    methods: {
      addProductTest () {
        let data = {
          deviceNo: 'hello',
          districtId: $.trim(this.formContent.districtId),
          info: $.trim(this.formContent.info),
          inputTime: $.trim(this.formContent.inputTime),
          inregral: $.trim(this.formContent.inregral),
          name: $.trim(this.formContent.name),
          picture: $.trim(this.formContent.picture.join(',')),
          productType: $.trim(this.formContent.productType),
          shopId: 1,
          productModelId: $.trim(this.formContent.productModelId)
        }
        let validateResult = this.formValidate(data)
        if (validateResult.status) {
          $.post('/basis/productTest.do?method=insert', {param: JSON.stringify(data)}).then((res) => {
          })
        } else {
          this.isShowErr = true
        }
      },
      reset () {
        this.formContent.provinceName = ''
        this.formContent.cityName = ''
        this.formContent.districtName = ''
        this.formContent.productType = ''
        this.formContent.name = ''
        this.formContent.info = ''
        this.formContent.inputTime = ''
        this.formContent.inregral = ''
      },
      getProductModel () {
        $.post('/basis/productModel.do?method=query', {param: JSON.stringify({})}).then((res) => {
          this.formContent.productModelOption = res.maps
        })
      },
      initDistrictId (id) {
        this.formContent.districtId = id
      },
      // 表单验证
      formValidate (option) {
        let result = {
          status: false
        }
        if (!validate(option.districtId, 'require')) {
          this.errMsg = '地址不能为空'
          return result
        }
        if (!validate(option.productModelId, 'require')) {
          this.errMsg = '产品型号不能为空'
          return result
        }
        if (!validate(option.productType, 'require')) {
          this.errMsg = '产品类型不能为空'
          return result
        }
        if (!validate(option.inregral, 'integer')) {
          this.errMsg = '赠送积分不能为空'
          return result
        }
        if (!validate(option.name, 'require')) {
          this.errMsg = '名称不能为空'
          return result
        }
        if (!(option.name.length >= 6 && option.name.length <= 35)) {
          this.errMsg = '名称长度需要在6~36位'
          return result
        }
        if (!validate(option.inputTime, 'require')) {
          this.errMsg = '请选择日期'
          return result
        }
        if (!validate(option.info, 'require')) {
          this.errMsg = '说明不能为空'
          return result
        }
        result.status = true
        this.errMsg = '添加成功'
        return result
      }
    },
    components: {
      SetParam,
      MAddress
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .insert-shop-product
    position: relative
    width: 1000px
    margin: 40px auto 0
    border 1px solid rgba(0, 0, 0, .2)
    .title
      width: 100%
      line-height: 50px
      height: 50px
      text-indent: 20px
      background: #f3f5f7
      font-weight: 700
    .form-con
      padding 20px 0 0 0
      .el-textarea
        width: 440px
      .el-form-item__label
        margin-right 20px
        &:before
          content: '*'
          color: rgb(240, 20, 20)
          padding-right: 5px
      .el-input
        width 220px
      .el-form-item__error
        text-indent 20px
      .el-count
        width 220px
      .btn-group
        padding-top: 10px
        button
          display: inline-block
          margin-right: 10px
</style>
